<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="{use: false}">
		<view class="index index-bg" :style="[headerStyle]">
			<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
				<view class="index-bg" :style="[headerStyle]">
					<u-navbar :is-fixed="false" :border-bottom="false" :background="{ background: 'transparent', }"
						:is-back="false">
						<view class="flex-1 flex row">
							<router-link to="/pages/message_center/message_center">
								<image class="icon-md m-l-30" src="/static/images/icon_news.png">
								</image>
							</router-link>
							<view class="flex-1">
								<router-link to="/pages/goods_search/goods_search">
									<u-search wrap-bg-color="transparent" bg-color="#fff" :disabled="true" :height="62">
									</u-search>
								</router-link>
							</view>
						</view>
					</u-navbar>
					<view class="flex">
						<view class="flex-1" style="min-width:600rpx">
							<u-tabs active-color="#fff" inactive-color="#fff" :current="active" :list="cateList"
								bg-color="transparent" :active-item-style="{fontSize:'32rpx'}" :bar-width="64" :bold="false"
								:barStyle="{background: 'linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 49%, rgba(255, 255, 255, 0) 100%)'}"
								@change="changeActive">
							</u-tabs>
						</view>
						<router-link to="/pages/goods_cate/goods_cate" navType="pushTab">
							<view class="white flex cate-btn m-l-10">
								<image class="icon-xs m-r-4" src="/static/images/icon_cate.png" alt="">
									分类
							</view>
						</router-link>
					</view>
				</view>
			</u-sticky>
			<view class="tab-con">
				<view v-show="active == 0">
					<index-home ref="indexHome" :home-data="homeData" :nav-list="navList">
					</index-home>
					<goods-column ref="mescrollItem" :autoGetData="false"></goods-column>
				</view>
				<template v-for="(item, index) in cateList">
					<view v-if="index > 0" class="tab-item" v-show="active == index" :key="index">
						<view>
							<cate-home v-if="showCateList[index]" :top="cateTop" ref="cateItem" :i="index" :index="active"
								:cate="item">
							</cate-home>
						</view>
					</view>
				</template>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<lyg-popup v-if="appConfig.app_agreement" title="服务协议和隐私政策"
			protocolPath='/bundle/pages/server_explan/server_explan?type=0'
			policyPath='/bundle/pages/server_explan/server_explan?type=1' policyStorageKey="has_read_privacy">
		</lyg-popup>
		<!-- #endif -->
		<PromptOut :outShowPop="outShowPop" />
		<view v-if="userInfo.is_new !== 1 || userInfo.is_new2 !== 1" class="free-box" @click="openFree">
			<image style="width: 120rpx;" src="@/static/images/free-img.png" mode="widthFix"></image>
		</view>
		<FreeBlindBox :showPop="isShowFreeBlindBox" :userInfo="userInfo" :freeGoodsList="freeGoodsList"
			:closeFreeBlindBox="closeFreeBlindBox" />
	</mescroll-body>
</template>

<script>
	import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import FreeBlindBox from "@/components/free-blind-box/free-blind-box.vue";
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getMenu,
		getHome,
		getHotGoods,
		getLevelOneList,
		getGoodsList
	} from "@/api/store"
	import {
		getRect,
		setTabbar
	} from '@/utils/tools'
	import PromptOut from '@/components/prompt-out/prompt-out.vue';
	const app = getApp()
	const homeItem = {
		name: '首页'
	}
	export default {
		mixins: [MescrollMixin, MescrollCompMixin],
		components: {
			PromptOut,
			FreeBlindBox
		},
		data() {
			return {
				active: 0,
				navBg: 0,
				goodsList: [],
				homeData: {},
				navList: [],
				enable: true,
				cateList: [homeItem],
				showCateList: [],
				isShowFreeBlindBox: false,
				freeGoodsList: [],
			}
		},
		async onLoad(options) {
			setTabbar()
			uni.$on('refreshhome', () => {
				this.getHomeFun()
			})
			this.getGoodsLists();
		},
		onUnload() {
			uni.$off('refreshhome')
		},
		onShow() {
			this.enable = this.active == 0 ? true : false
			this.getCartNum()
		},
		onHide() {
			// #ifdef H5
			this.enable = false
			// #endif
		},
		methods: {
			...mapActions(['getCartNum']),
			openFree() {
				this.isShowFreeBlindBox = true;
			},
			// 关闭免费盲盒弹窗
			closeFreeBlindBox() {
				this.isShowFreeBlindBox = false;
			},
			// 获取赠送商品列表
			getGoodsLists() {
				const obj = {
					page_no: 1,
					page_size: 1,
					keyword: '',
					type: '3'
				}
				getGoodsList(obj).then(res => {
					this.freeGoodsList = res.data.lists;
				})
			},
			// 获取1级分类
			async getLevelOneListFun() {
				const {
					code,
					data
				} = await getLevelOneList();
				if (code == 1) {
					this.cateList = [homeItem, ...data]
					this.showCateList = []
				}
			},
			// 获取菜单
			async getMenuFun() {
				const {
					code,
					data
				} = await getMenu({
					type: 1
				});
				if (code == 1) {
					this.navList = data
				}
			},
			// 获取首页数据
			async getHomeFun() {
				const {
					code,
					data
				} = await getHome();
				if (code == 1) {
					this.homeData = data
				}
			},
			changeActive(index) {
				this.active = index
				this.enable = index == 0
				this.mescroll.optDown.use = index == 0
				this.showCateList[index] = true
			},
			async downCallback() {
				await this.getLevelOneListFun()
				await this.getMenuFun()
				await this.getHomeFun()
				this.$refs.mescrollItem.getData()
				this.mescroll.endSuccess(0, false)
			}
		},
		computed: {
			...mapGetters(['sysInfo', 'inviteCode', 'appConfig', 'outShowPop', 'userInfo']),
			navH() {
				return this.sysInfo.navHeight + 'px'
			},
			// 分类栏悬浮高度
			cateTop() {
				return this.sysInfo.navHeight + uni.upx2px(80) + 'px'
			},
			headerStyle() {
				const {
					active,
					cateList,
					appConfig
				} = this
				let bg = cateList[active].bg_image
				if (active == 0) {
					bg = appConfig.index_setting.top_bg_image
				}
				return bg ? {
					'background-image': `url(${bg})`
				} : {}

			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 0;
	}

	.index-bg {
		background-image: url('../../static/images/index_bg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.index {
		position: relative;
		min-height: calc(100vh - var(--window-bottom));

		.u-navbar {
			::v-deep .u-search {
				padding: 0 30rpx;
			}
		}

		.cate-btn {
			padding: 12rpx 16rpx 12rpx 20rpx;
			border-radius: 60rpx 0 0 60rpx;
			background-color: rgba(256, 256, 256, .4);
		}

	}

	.free-box {
		position: fixed;
		right: 20rpx;
		bottom: 160rpx;

		@-webkit-keyframes roundRule {

			0%,
			100% {

				-webkit-transform: rotate(-15deg);

			}

			50% {

				-webkit-transform: rotate(15deg);

			}

		}

		-webkit-animation: roundRule 1s ease-in-out infinite;

		-webkit-transform-origin: center center;
	}
</style>